<template>
  <div class="about-us">
    <div class="links-container">
        <div class="links-column">
            <h1>关于我们</h1>
            <ul class="inline-links">
                <li v-for="(link, index) in links" :key="index">
                    <a :href="link.url">{{ link.name }}</a>
                </li>
            </ul>
        </div>
        <div class="links-column">
            <h1>业务概况</h1>
            <ul class="inline-links">
                <li v-for="(link, index) in workLinks" :key="index">
                    <a :href="link.url">{{ link.name }}</a>
                </li>
            </ul>
        </div>
        <div class="links-column">
            <h1>更多链接</h1>
            <ul class="inline-links">
                <li v-for="(link, index) in moreLinks" :key="index">
                    <a :href="link.url">{{ link.name }}</a>
                </li>
            </ul>
        </div>
        <div class="links-column">
            <h1>赭鞭识草</h1>
            <ul class="inline-links">
                <li v-for="(link, index) in otherLinks" :key="index">
                    <a :href="link.url">{{ link.name }}</a>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AboutUs',
  setup() {
    // 链接数据
    const links = [
        { name: '关于赭鞭识草', url: '#ai'},
        { name: '网站声明', url: '#aigc' },
    ];
    const workLinks = [
        { name: '健康书院', url: '#jksy' },
        { name: '学业质量检测平台', url: '#jksy' },
        { name: '帮助中心', url: '#ss'},
    ];
    const moreLinks = [
        { name: '网上有害信息举报专区', url: 'https://www.12377.cn/?spm=C68560.PolhvDPp4ZzY.En9CqZ5t6KuD.13' },
        { name: '辟谣平台', url: 'https://www.piyao.org.cn/?spm=C68560.PolhvDPp4ZzY.En9CqZ5t6KuD.14'},
        { name: '八堂热线', url: '#hh'},
        { name: '法律顾问', url: '#hh'},
        { name: '人才招聘', url: '#hh'},
    ];
    const otherLinks = [
        { name: '首页', url: '/home'},
        { name: '识药台', url: '/identify/image'},
        { name: '百草库', url: '/library/grass'},
        { name: '悬壶坛', url: '/Forum'},
        { name: '八卦堂', url: '/news'},
    ];

    return {
        links,
        workLinks,
        moreLinks,
        otherLinks
    };
  }
});
</script>

<style scoped>
.about-us {
    width: 100%;
    height: 199px;
    background-color: #022c46;
    border: 10px;
    box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}

.links-container {
    display: flex;
    justify-content: space-between;
}

.links-column {
    width: 24%;
    height: 186px;
    /* flex: 1; */
    margin-top: 10px;
    margin-left: 10px;
    box-shadow: 3px 0 0px rgba(0, 0, 0, 0.1); /* 添加右侧阴影 */
    text-align: left;
}

.links-column h1 {
    font-size: 20px;
    font-family: SimSun;
    color: #F5D3B8;
    margin-bottom: 10px;
}

/* .links-column ul {
    font-family: SimSun;
    list-style: none;
    padding: 0;
} */

.inline-links {
    font-family: SimSun;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    list-style: none;
    padding: 0;
    gap: 10px; /* 在 li 元素之间添加间隔 */
}

.inline-links li {
  margin-right: 10px; /* 列表项之间的间距 */
  flex: 1 1 50%; /* 每行最多显示两个列表项 */
}

.inline-links li:last-child {
  margin-right: 0; /* 最后一个列表项不需要右边距 */
}

.inline-links a {
  text-decoration: none;
  color: #fff;
}

.inline-links a:hover {
  text-decoration: underline;
}

/* 添加赭鞭识草的样式 */
/* .links-column:last-child {
    flex: 2; 增加宽度，使其占据更多空间 */
/* } */
</style>